<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { Project } from '../entity'
import * as projectApi from '../api'
import EnvConfig from '../components/EnvConfig.vue'
import ScriptConfig from '../components/ScriptConfig.vue'

const route = useRoute()
const router = useRouter()
const projectId = route.params.id as string

// 项目数据
const project = ref<Project | null>(null)
const loading = ref(false)

// 组件引用
const envConfigRef = ref()
const scriptConfigRef = ref()

// 时间格式化函数
const formatDateTime = (time: string) => {
  const date = new Date(time)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
}

// 加载项目数据
const loadProject = async () => {
  try {
    loading.value = true
    project.value = await projectApi.getById(projectId)
    if (!project.value) {
      ElMessage.error('项目不存在')
      router.push('/project')
      return
    }
    await Promise.all([
      envConfigRef.value?.loadEnvs(),
      scriptConfigRef.value?.loadScripts()
    ])
  } catch (error) {
    console.error('加载项目失败:', error)
    ElMessage.error('加载项目失败')
  } finally {
    loading.value = false
  }
}

// 返回列表
const handleBack = () => {
  router.push('/project')
}

onMounted(() => {
  loadProject()
})
</script>

<template>
  <div class="project-detail" v-loading="loading">
    <!-- 头部 -->
    <div class="header">
      <el-button @click="handleBack">返回</el-button>
      <h2 v-if="project">{{ project.name }}</h2>
    </div>

    <!-- 基本信息 -->
    <el-descriptions v-if="project" :column="2" border>
      <el-descriptions-item label="项目路径">{{ project.path }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ formatDateTime(project.updateTime) }}</el-descriptions-item>
      <el-descriptions-item label="描述" :span="2">{{ project.description }}</el-descriptions-item>
    </el-descriptions>

    <!-- 标签页 -->
    <el-tabs class="mt-4">
      <!-- 环境配置 -->
      <el-tab-pane label="环境配置">
        <EnvConfig ref="envConfigRef" :project-id="projectId" />
      </el-tab-pane>

      <!-- 脚本管理 -->
      <el-tab-pane label="脚本管理">
        <ScriptConfig 
          v-if="project"
          ref="scriptConfigRef" 
          :project-id="projectId"
          :project="project"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.project-detail {
  padding: 20px;

  .header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;

    h2 {
      margin: 0;
    }
  }

  .mt-4 {
    margin-top: 16px;
  }
}
</style>
